前几天 在我同事博客里面看到一篇幻灯片 所以觉得用Jqeury写幻灯片也并不是很难 就是和我在博客里面的tab自动切换的原理是一模一样的 只是形式不同而已！所以今天也写了一个常见的幻灯片效果 用Jquery写的 很简单 也是用我上次tab自动切换的js 所以原理没有什么可说的 不懂的可以看看上次写的TAB自动切换代码：下面的一张截图：
就是类似这种幻灯片：
下面是HTML结构和CSS样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .Marquee{ width:490px; margin:50px auto 0; overflow:hidden;} body,div,ul,li{ margin:0; padding:0;} ul,li{ list-style:none;} img{ display:block; border:none;} .content-main{ width:490px; height:170px; overflow:hidden;} .content{ width:490px; height:170px; overflow:hidden;} .hide{ display:none;} .menu{ width:490px; height:22px; overflow:hidden; background:#966;} .menu li{ width:160px; height:22px; overflow:hidden; float:left; line-height:22px; text-align:center;} .menu li.last-col{ width:170px; height:22px; overflow:hidden;} .current{ background: #F00;} .content a{ width:490px; height:170px; overflow:hidden; display:block;} </style> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="autoTab.js"></script> </head> <body> <div id="Marquee" class="Marquee"> <div class="content-main"> <div class="content"><a href="#" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg"/></a></div> <div class="content hide"><a href="#" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/2.jpg"/></a></div> <div class="content hide"><a href="#" target="_blank"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/3.jpg"/></a></div> </div> <ul class="menu"> <li class="current">tab1</li> <li>tab2</li> <li class="last-col">tab3</li> </ul> </div> <script type="text/javascript"> new tabMarquee("#Marquee",3); </script> </body> </html>JS代码如下:
// JavaScript Document function tabMarquee(obj,count){ _this = this; _this.obj = obj; _this.count = count; _this.time = 3000; //停留的时间 _this.n = 0; var t; this.slider = function(){ $(_this.obj + " .menu li").bind("mouseover",function(event){ $(event.target).addClass("current").siblings().removeClass("current"); var index = $(_this.obj + " .menu li").index(this); $(_this.obj + " .content-main .content").eq(index).show().siblings().hide(); _this.n = index; }) } this.addHover = function(){ $(_this.obj).hover(function(){ clearInterval(t); },function(){ t = setInterval(_this.autoPlay,_this.time); }) } this.autoPlay = function(){ _this.n = _this.n >=(_this.count-1) ? 0 : ++_this.n; $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover"); } this.factory = function(){ this.slider(); this.addHover(); t = setInterval(this.autoPlay,_this.time); } this.factory(); }下面传个附件 看不懂可以下载下来先看看效果 然后稍微理解下 就ok了！其实说真的js重要 但是HTML结构和CSS样式同样重要 有时结构写好的话 css写好的话 js就很简单！！
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦